<template>
  <div>
    <div class="header" style="width: 1200px">
      <el-form
        :inline="true"
        :model="form"
        class="demo-form-inline"
        @submit.native.prevent
      >
        <el-form-item label="酒店名称">
          <el-input
            v-model="form.hname"
            placeholder="输入酒店名称:模糊查询"
            @keyup.native.enter="onSubmit"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        style="height: 40px; margin-right: 100px"
        @click="dialogFormVisible = true"
        >新增酒店</el-button
      >
    </div>
    <el-dialog
      title="新增酒店"
      :visible.sync="dialogFormVisible"
      destroy-on-close="true"
    >
      <el-form
        class=""
        ref="form"
        :model="form"
        label-width="100px"
        style="width: 600px"
        :rules="rules"
      >
        <el-form-item label="酒店名称" prop="hname">
          <el-input
            v-model="form.hname"
            placeholder="请输入酒店名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="酒店照片" prop="himg">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9000/upload"
            :on-success="uploadSuccess"
            :show-file-list="false"
          >
            <img v-if="form.himg" :src="form.himg" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="酒店位置" prop="hlocation">
          <el-input
            v-model="form.hlocation"
            placeholder="请输入介绍"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit"> 新 增</el-button>
      </div>
    </el-dialog>
    <el-divider></el-divider>
    <el-table :data="rooms.data">
      <el-table-column
        label="酒店编号"
        prop="hid"
        width="180px"
      ></el-table-column>

      <el-table-column
        label="酒店名称"
        prop="hname"
        width="180px"
      ></el-table-column>
      <el-table-column label="酒店位置位置" prop="hlocation"></el-table-column>
      <el-table-column label="酒店图片">
        <template slot-scope="scope">
          <img :src="scope.row.himg" width="150px" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            title="查看酒店房间"
            size="small"
            type="primary"
            icon="el-icon-more-outline"
            circle
            @click="$router.push(`/home/hotelroom-list/${scope.row.hid}`)"
          ></el-button>
          <el-button
            title="删除酒店"
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delItem(scope.row.hid)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      background
      layout="->,prev, pager, next,total,jumper"
      :current-page="this.page"
      :page-size="this.pagesize"
      :total="this.total"
      @current-change="pageChange"
      style="margin-top: 30px"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      keyword: '',
      rooms: {},
      page: 1,
      pagesize: 5,
      total: 0,
      form: {
        hname: '',
        hlocation: '',
        himg: '',
      },
      rules: {
        hname: [{ required: true, message: '请填入酒店名称', trigger: 'blur' }],
        hlocation: [
          { required: true, message: '请填入酒店位置', trigger: 'blur' },
          { min: 5, max: 15, message: '字符长度[5-30]', trigger: 'blur' },
        ],
        himg: [{ required: true, message: '请上传房间图片', trigger: 'blur' }],
      },
    }
  },
  mounted() {
    let params = {
      page: this.page,
      pagesize: this.pagesize,
    }
    this.$http.roomApi.list(params).then(res => {
      console.log(res)
      this.rooms = res.data
      this.total = res.data.total
    })
  },
  methods: {
    pageChange(page) {
      console.log(page)
      let params = { page: page, pagesize: this.pagesize }
      this.$http.roomApi.list(params).then(res => {
        console.log('加载初始化的酒店列表', res)
        // 将res.data.data存入this.moviesData
        this.rooms = res.data
      })
      // }
    },
    uploadSuccess(res, file) {
      console.log(res)
      // 将上传成功后的图片访问地址，存入data
      this.form.himg = res.data
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          // 发送请求，添加酒店到数据库
          this.$http.roomApi.add(this.form).then(res => {
            this.$message({
              type: 'success',
              message: '新增酒店成功',
            })
            this.dialogFormVisible = false

            // 回到上一页
            // this.$router.go(-1)
            this.$router.push('/home/room-list')
          })
        }
      })
    },
    delItem(hid) {
      console.log(hid)
      console.log('待删除酒店的ID：' + hid)
      // 弹出确认删除对话框
      this.$confirm('该操作将永久删除酒店，是否继续？', '提示', {
        type: 'warning',
      }).then(() => {
        // 确认删除
        // 发送请求，执行删除操作
        console.log(hid)
        this.$http.roomApi.delete(hid).then(res => {
          // this.$http.noteApi.delete({ sid }).then(res => {
          this.$message({ type: 'success', message: '删除成功' })
          // 刷新当前列表  整理参数发送请求
          // 发送请求，加载攻略列表
          let params = {
            page: this.page,
            pagesize: this.pagesize,
          }
          this.$http.roomApi.list(params).then(res => {
            console.log(res)
            this.rooms = res.data
            this.total = res.data.total
          })
        })
      })
    },
    onSubmit() {
      this.keyword = this.form.hname
      if (this.form.hname) {
        let params = {
          hname: this.form.hname,
          page: 1,
          pagesize: this.pagesize,
        }
        this.$http.roomApi.mohu(params).then(res => {
          console.log('131', res)
          this.rooms = res.data
          this.total = res.data.total
        })
      } else {
        let params = {
          page: this.page,
          pagesize: this.pagesize,
        }
        this.$http.roomApi.list(params).then(res => {
          console.log(res)
          this.rooms = res.data
          this.total = res.data.total
        })
      }
    },
  },
}
</script>

<style lang="scss">
.header {
  display: flex;
  justify-content: space-between;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}
.rowbtn {
  margin-left: 280px;
}
.fyq {
  margin-top: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
</style>
